<!-- 功能管理页面 -->
<script setup lang='ts'>
import {reactive, ref, computed, onMounted,  watch} from 'vue'
import  dDialog  from '@/components/dDialog/dDialog.vue'
import {FormRules, ElMessage} from 'element-plus'
import type {ElForm} from 'element-plus'
import {FromItem} from '@/components/dFrom/dFrom'
import dFrom from '@/components/dFrom/dFrom.vue'
import { referenceRangeSave} from '@/api/instrument/Inspection'
import {SeleteData} from '@/api/config'
import {NegativeNumber,  Number, transfDicArrData} from '@/util/common'
import userCommon from '@/store/common'
const common = userCommon.setup().store
const emits = defineEmits(['cancel', 'confirm', 'close'])
const props = defineProps({
  //显示
  showDialog:{
    type:Boolean,
    required:true
  },
  popData:{
    type:Object,
    required:true
  },
  //仪器id
  popId:{
    type:String,
    required:true
  },
  //每一项id
  addId:{
    type:String,
    required:true
  },
  inspectResultType:{
    type:String,
    required:true
  }
})

const itemId = computed(() => {
  return props.addId
})

const optionsvalue = ref('')

const inspectResultTypes = computed(() => {
  return props.inspectResultType
})
const formData = computed(() => {
  return props.popData
})

optionsvalue.value = inspectResultTypes.value === '3' ? (formData.value.resultType ? formData.value.resultType : '1') : ''

//表单清除控制
const resetFieldsFlag = ref(false)

//显示加载状态
const showLoading = ref(false)

// 清除表单数据
const validateFlag = ref(false)


//下拉选择数据
const genderSelete = ref<Array<any>>([])



const options2 = ref([{label:'定量结果', value:'1'}, {label:'定性结果', value:'2'}])



const inputActive = ref(false)

const inputActive2 = ref(false)
///
//0或者正整数
const re = /^(0|\+?[1-9][0-9]*)$/
//判断
const numberCardlenth = (rule: any, value: any, callback: any) => {
  if (!formData.value.Range) {
    callback()
    return
  }
  const vLeft = formData.value.ageRangeLow
  const vRight = formData.value.ageRangeHigh
  if (vLeft && !re.test(vLeft)) {
    callback(new Error('请输入零和正整数'))
  } else if (vRight && !re.test(vRight)) {
    callback(new Error('请输入零和正整数'))
  }
  else {
    callback()
  }
}

const rules = reactive<FormRules>({
  // ageRange: [
  //   {required: true, message: '最低职级和最高职级不能为空', trigger: ['change', 'blur']},
  //   {required: false, validator:numberCardlenth, trigger: ['change', 'blur']}
  // ],
  reagentId: [
    { required: false, message: '请选择', trigger: ['change', 'blur']}
  ],
  viewRange: [
    { required: true, message: '请输入参考区间描述', trigger: 'change' },
    {required:false, message:'长度应小于50个字符', max:50, trigger: ['change', 'blur']}
  ],
  genderApply: [
    { required: false, message: '请选择适用性别', trigger: 'change' }
  ],
  ageRangeUnit: [
    {required:false, message:'长度应小于10个字符', pattern:/^\S{1,10}$/, trigger: ['change', 'blur']}
  ],
  dangerRangeHigh: [
    {required: false, message: '请输入数字,小数点后面限五位', pattern:NegativeNumber, trigger: ['change', 'blur']},
    {required:false, message:'长度应小于10个字符', pattern:/^\S{1,10}$/, trigger: ['change', 'blur']}
  ],
  dangerRangeLow: [
    {required: false, message: '请输入数字,小数点后面限五位', pattern:NegativeNumber, trigger: ['change', 'blur']},
    {required:false, message:'长度应小于10个字符', pattern:/^\S{1,10}$/, trigger: ['change', 'blur']}
  ],
  reviewRangeHigh: [
    {required: false, message: '请输入数字,小数点后面限五位', pattern:NegativeNumber, trigger: ['change', 'blur']},
    {required:false, message:'长度应小于10个字符', pattern:/^\S{1,10}$/, trigger: ['change', 'blur']}
  ],
  reviewRangeLow: [
    {required: false, message: '请输入数字,小数点后面限五位', pattern:NegativeNumber, trigger: ['change', 'blur']},
    {required:false, message:'长度应小于10个字符', pattern:/^\S{1,10}$/, trigger: ['change', 'blur']}
  ]
})





// 弹窗表单数据
const fromItems = ref<Array<FromItem>>([
  {label:'适用性别', prop:'genderApply', placeholder:'请选择适用性别', type:'selete', changeSubmit:false, seleteData:genderSelete.value, style:{gridColumn:'1/3'}},
  {label:'年龄范围', prop:'ageRange',  type:'slot', slotName:'ageRange'},
  {label:'参考区间', prop:'Range',  type:'slot', slotName:'section'},
  {label:'高危值', prop:'dangerRangeHigh', placeholder:'请输入高危值', type:'input', enterSubmit:false},
  {label:'低危值', prop:'dangerRangeLow', placeholder:'请输入低危值', type:'input', enterSubmit:false},
  {label:'高复查值', prop:'reviewRangeHigh', placeholder:'请输入高复查值', type:'input', enterSubmit:false},
  {label:'低复查值', prop:'reviewRangeLow', placeholder:'请输入低复查值', type:'input', enterSubmit:false},
  {label:'参考区间描述', prop:'viewRange',  type:'slot', slotName:'viewRange', style:{gridColumn:'1/3'}}
])
watch(() => props.inspectResultType, (newValue) => {
  if (newValue)
  {
    if (newValue + '' === '1') {
      fromItems.value = [
        {label:'适用性别', prop:'genderApply', placeholder:'请选择适用性别', type:'selete', changeSubmit:false, seleteData:genderSelete.value, style:{gridColumn:'1/3'}},
        {label:'年龄范围', prop:'ageRange',  type:'slot', slotName:'ageRange'},
        {label:'参考区间', prop:'Range',  type:'slot', slotName:'section'},
        {label:'高危值', prop:'dangerRangeHigh', placeholder:'请输入高危值', type:'input', enterSubmit:false},
        {label:'低危值', prop:'dangerRangeLow', placeholder:'请输入低危值', type:'input', enterSubmit:false},
        {label:'高复查值', prop:'reviewRangeHigh', placeholder:'请输入高复查值', type:'input', enterSubmit:false},
        {label:'低复查值', prop:'reviewRangeLow', placeholder:'请输入低复查值', type:'input', enterSubmit:false},
        {label:'参考区间描述', prop:'viewRange',  type:'slot', slotName:'viewRange', style:{gridColumn:'1/3'}}
      ]
    } else if (newValue + '' === '3') {
      fromItems.value = [
        {label:'适用性别', prop:'genderApply', placeholder:'请选择适用性别', type:'selete', changeSubmit:false, seleteData:genderSelete.value},
        {label:'年龄范围', prop:'ageRange',  type:'slot', slotName:'ageRange'},
        {label:'参考区间', prop:'Range',  type:'slot', slotName:'section'},
        {label:'高危值', prop:'dangerRangeHigh', placeholder:'请输入高危值', type:'input', enterSubmit:false},
        {label:'低危值', prop:'dangerRangeLow', placeholder:'请输入低危值', type:'input', enterSubmit:false},
        {label:'高复查值', prop:'reviewRangeHigh', placeholder:'请输入高复查值', type:'input', enterSubmit:false},
        {label:'低复查值', prop:'reviewRangeLow', placeholder:'请输入低复查值', type:'input', enterSubmit:false},
        {label:'参考区间描述', prop:'viewRange',  type:'slot', slotName:'viewRange', style:{gridColumn:'1/3'}}
      ]
    }
  } else {
    fromItems.value = [
      {label:'适用性别', prop:'genderApply', placeholder:'请选择适用性别', type:'selete', changeSubmit:false, seleteData:genderSelete.value},
      {label:'年龄范围', prop:'ageRange',  type:'slot', slotName:'ageRange'},
      {label:'参考区间', prop:'Range',  type:'slot', slotName:'section'},
      {label:'高危值', prop:'dangerRangeHigh', placeholder:'请输入高危值', type:'input', enterSubmit:false},
      {label:'低危值', prop:'dangerRangeLow', placeholder:'请输入低危值', type:'input', enterSubmit:false},
      {label:'高复查值', prop:'reviewRangeHigh', placeholder:'请输入高复查值', type:'input', enterSubmit:false},
      {label:'低复查值', prop:'reviewRangeLow', placeholder:'请输入低复查值', type:'input', enterSubmit:false},
      {label:'参考区间描述', prop:'viewRange',  type:'slot', slotName:'viewRange', style:{gridColumn:'1/3'}}
    ]
  }
}, {deep:true, immediate:true})
// 弹窗表单数据
const fromItems2 = ref<Array<FromItem>>([
  {label:'适用性别', prop:'genderApply', placeholder:'请选择适用性别', type:'selete', changeSubmit:false, seleteData:genderSelete.value, style:{gridColumn:'1/3'}},
  // {label:'低复查值', prop:'reviewRangeLow', placeholder:'请输入仪器型号', type:'input', enterSubmit:false},
  {label:'年龄范围', prop:'ageRange',  type:'slot', slotName:'ageRange'},
  // {label:'参考区间', prop:'Range',  type:'slot', slotName:'section'},
  {label:'参考区间:', prop:'dangerPositive',  type:'slot', slotName:'dangerPositive', style:{'align-items': 'center'}},
  {label:'参考区间描述', prop:'viewRange',  type:'slot', slotName:'viewRange', style:{gridColumn:'1/3'}}
])



//正则校验
const IfreferenceRangeSave = () => {
  if ((formData.value.ageRangeLow && !Number.test(formData.value.ageRangeLow)) || (formData.value.ageRangeHigh && !Number.test(formData.value.ageRangeHigh))) {
    return  ElMessage({ type: 'error', message: '年龄范围应该为正整数'})
  }
  if (formData.value.ageRangeLow && formData.value.ageRangeHigh && +formData.value.ageRangeLow > +formData.value.ageRangeHigh) {
    return  ElMessage({ type: 'error', message: '年龄下限不能大于年龄上限'})
  }
  if ((formData.value.ageRangeLow && (formData.value.ageRangeLow + '').length > 3) || (formData.value.ageRangeHigh && (formData.value.ageRangeHigh + '').length > 3)) {
    return  ElMessage({ type: 'error', message: '年龄范围字符长度不能大于3'})
  }
  if ((formData.value.normalRangeLow && !NegativeNumber.test(formData.value.normalRangeLow)) || (formData.value.normalRangeHigh && !NegativeNumber.test(formData.value.normalRangeHigh))) {
    return  ElMessage({ type: 'error', message: '参考区间应该为数字,小数点后面限五位'})
  }
  if (formData.value.normalRangeLow && formData.value.normalRangeHigh && +formData.value.normalRangeLow > +formData.value.normalRangeHigh) {
    return  ElMessage({ type: 'error', message: '参考区间下限不能大于参考区间上限'})
  }
  if ((formData.value.normalRangeLow && (formData.value.normalRangeLow + '').length > 10) || (formData.value.normalRangeHigh && (formData.value.normalRangeHigh + '').length > 10)) {
    return  ElMessage({ type: 'error', message: '参考区间字符长度不能大于10'})
  }
  if ((formData.value.ageRangeLow && formData.value.ageRangeHigh) && (+formData.value.ageRangeLow === +formData.value.ageRangeHigh)) {
    return  ElMessage({ type: 'error', message: '年龄范围前后不能相同'})
  }
  if ((formData.value.normalRangeLow && formData.value.normalRangeHigh) && (+formData.value.normalRangeLow === +formData.value.normalRangeHigh)) {
    return  ElMessage({ type: 'error', message: '参考区间前后不能相同'})
  }

  if ((formData.value.dangerRangeHigh && formData.value.dangerRangeLow) && (+formData.value.dangerRangeHigh === +formData.value.dangerRangeLow)) {
    return  ElMessage({ type: 'error', message: '高危值不能等于低危值'})
  }
  if ((formData.value.reviewRangeHigh && formData.value.reviewRangeLow) && (+formData.value.reviewRangeHigh === +formData.value.reviewRangeLow)) {
    return  ElMessage({ type: 'error', message: '高复查值不能等于低复查值'})
  }
  if ((formData.value.dangerRangeHigh && formData.value.reviewRangeHigh) && (+formData.value.dangerRangeHigh === +formData.value.reviewRangeHigh)) {
    return  ElMessage({ type: 'error', message: '高危值不能等于高复查值'})
  }
  if ((formData.value.dangerRangeLow && formData.value.reviewRangeLow) && (+formData.value.dangerRangeLow === +formData.value.reviewRangeLow)) {
    return  ElMessage({ type: 'error', message: '低危值不能等于低复查值'})
  }

  if (formData.value.dangerRangeHigh && formData.value.dangerRangeLow && +formData.value.dangerRangeHigh < +formData.value.dangerRangeLow) {
    return  ElMessage({ type: 'error', message: '高危值需大于低危值'})
  }
  if (formData.value.reviewRangeHigh && formData.value.reviewRangeLow && +formData.value.reviewRangeHigh < +formData.value.reviewRangeLow) {
    return  ElMessage({ type: 'error', message: '高复查值需大于低复查值'})
  }
  if (formData.value.dangerRangeHigh && formData.value.reviewRangeHigh && +formData.value.dangerRangeHigh < +formData.value.reviewRangeHigh) {
    return  ElMessage({ type: 'error', message: '高危值需大于高复查值'})
  }
  if (formData.value.dangerRangeLow && formData.value.reviewRangeLow && +formData.value.dangerRangeLow > +formData.value.reviewRangeLow) {
    return  ElMessage({ type: 'error', message: '低危值需小于低复查值'})
  }


  if (formData.value.reviewRangeLow && formData.value.normalRangeLow && +formData.value.reviewRangeLow > +formData.value.normalRangeLow) {
    return  ElMessage({ type: 'error', message: '参考区间下限应该大于等于低复查值'})
  }
  if (formData.value.normalRangeHigh && formData.value.reviewRangeHigh && +formData.value.normalRangeHigh > +formData.value.reviewRangeHigh) {
    return  ElMessage({ type: 'error', message: '参考区间上限应该小于等于高复查值'})
  }

  // formData.value.normalRangeLow = formData.value.normalRangeLow.toString()
  if (inspectResultTypes.value === '3') {
    formData.value.dangerPositive = 0
  } else {
    formData.value.dangerPositive = formData.value.dangerPositive ? 1 : 0
  }

  formData.value.instrumentId = props.popId
  formData.value.resultType = optionsvalue.value === '' ? inspectResultTypes.value : optionsvalue.value
  formData.value.itemId = itemId.value

  console.log('操作成功formData.value', formData.value)
  referenceRangeSave(formData.value).then(res => {
    if (res.data.code === 200) {
      ElMessage({
        type: 'success',
        message: '操作成功'
      })
      emits('confirm')
    }
  }).catch(() => {
    console.log('1111')

    if (inspectResultTypes.value === '3') {
      console.log('222')
      formData.value.dangerPositive = 0
    } else {
      console.log('333', formData.value.dangerPositive)
      formData.value.dangerPositive = formData.value.dangerPositive ? true : false
    }
  })
}



const domesticImported = () => {
  //适用性别
  common.getDicData('gender_apply').then((res) => {
    const arr: Array<SeleteData> = transfDicArrData(res)
    arr.forEach((item) => {
      item.value = item.value
      item.label = item.label
      genderSelete.value.push(item)
    })
    if (!formData.value.id) {
      formData.value.genderApply = 1
    }
  })



}

//表单验证
const onSubmitForm = () => {
  IfreferenceRangeSave()
}

// 弹窗取消
const onCancel = () => {
  emits('cancel')
}
// 弹窗关闭
const onClose = () => {
  emits('close')
  resetFieldsFlag.value = !resetFieldsFlag.value
}
// 弹窗保存
const onConfirm = () => {
  validateFlag.value = !validateFlag.value

}

// 生命周期
onMounted(() => {
  domesticImported()
})

</script>

<template>
  <d-dialog
    :title="formData.id?'编辑参考区间':'新增参考区间'"
    :show-dialog="showDialog"
    custom-class="pop-div"
    @cancel="onCancel"
    @confirm="onConfirm"
    @close="onClose"
  >
    <!-- 检验结果类型{{ inspectResultTypes }}
    未知{{ optionsvalue }} -->
    <el-form v-if="inspectResultTypes==='3'" class="topjianyan" label-width="134px" style="margin: 20px 0;">
      <el-form-item label="检验结果类型">
        <el-select v-model="optionsvalue">
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
    </el-form>

    <div v-if="optionsvalue==='1'||inspectResultTypes==='1'">
      <d-from
        :reset-fields-flag="resetFieldsFlag"
        :validate-flag="validateFlag"
        label-position="right"
        :label-width="135"
        :rules="rules"
        :form-data="formData"
        :form-items="fromItems"
        :form-line-num="2"
        @submit="onSubmitForm"
      >
        <template #ageRange>
          <div class="input-div">
            <div :id="inputActive?'active':''" class="left input-border-right">
              <div class="left-div">
                <el-input
                  v-model="formData.ageRangeLow"
                  placeholder="请输入年龄"
                  class="input-div-input"
                  controls-position="right"
                  :min="0"
                  :step="1"
                  :maxlength="3"
                  :step-strictly="true"
                  :controls="false"
                  @focus="inputActive=true"
                  @blur="inputActive=false"
                />
              </div>
              <!-- <input v-model="formData.ageRangeLow" type="number" placeholder="请输入年龄范围" @focus="inputActive=true" @blur="inputActive=false"> -->
              ~
              <!-- <input v-model="formData.ageRangeHigh" type="number" placeholder="请输入年龄范围" class="input-div-input" @focus="inputActive=true" @blur="inputActive=false"> -->
              <div class="left-div">
                <el-input
                  v-model="formData.ageRangeHigh"
                  placeholder="请输入年龄"
                  class="input-div-input"
                  controls-position="right"
                  :min="1"
                  :step="1"
                  :maxlength="3"
                  :controls="false"
                  :step-strictly="true"
                  @focus="inputActive=true"
                  @blur="inputActive=false"
                />
              </div>
            </div>
            <el-tag class="mx-1 tagStyle" size="large" color="#efeef1">
              岁
            </el-tag>
            <!-- <el-select v-model="formData.ageRangeUnit" class="m-2" placeholder="请选择" style="width:20%;">
              <el-option
                v-for="item in ageUnitSelete"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select> -->
          </div>
        </template>
        <template #section>
          <div :id="inputActive2?'active':''" class="input-divs d-common-grid-col-three">
            <!-- <input v-model="formData.normalRangeLow" type="text" placeholder="请输入参考区间" @focus="inputActive2=true" @blur="inputActive2=false"> -->
            <!-- <el-input v-model="formData.normalRangeLow" placeholder="请输入参考区间" class="input-div-input" clearable @focus="inputActive2=true" @blur="inputActive2=false" /> -->
            <div class="left-div">
              <el-input
                v-model="formData.normalRangeLow"
                placeholder="请输入参考区间"
                class="input-div-input"
                controls-position="right"
                :maxlength="10"
                :controls="false"
                @focus="inputActive2=true"
                @blur="inputActive2=false"
              />
            </div>

            ~
            <!-- <input v-model="formData.normalRangeHigh" type="text" placeholder="请输入参考区间" @focus="inputActive2=true" @blur="inputActive2=false"> -->
            <!-- <el-input v-model="formData.normalRangeHigh" placeholder="请输入参考区间" class="input-div-input" clearable @focus="inputActive2=true" @blur="inputActive2=false" /> -->
            <div class="left-div">
              <el-input
                v-model="formData.normalRangeHigh"
                placeholder="请输入参考区间"
                class="input-div-input"
                controls-position="right"
                :maxlength="10"
                :controls="false"
                @focus="inputActive2=true"
                @blur="inputActive2=false"
              />
            </div>
          </div>
        </template>
        <template #viewRange>
          <el-input v-model="formData.viewRange" type="textarea" placeholder="请输入参考区间描述" />
        </template>
      </d-from>
      <div style="height:20px" />
    </div>
    <!-- //最中间弹窗 -->
    <div v-if="optionsvalue==='2'||inspectResultTypes==='2'">
      <d-from
        :reset-fields-flag="resetFieldsFlag"
        :validate-flag="validateFlag"
        label-position="right"
        :label-width="135"
        :rules="rules"
        :form-data="formData"
        :form-items="fromItems2"
        :form-line-num="2"
        @submit="onSubmitForm"
      >
        <template #ageRange>
          <div class="input-div">
            <div :id="inputActive?'active':''" class="left input-border-right">
              <div class="left-div">
                <el-input
                  v-model="formData.ageRangeLow"
                  placeholder="请输入年龄"
                  class="input-div-input"
                  controls-position="right"
                  :min="0"
                  :step="1"
                  :maxlength="10"
                  :step-strictly="true"
                  :controls="false"
                  @focus="inputActive=true"
                  @blur="inputActive=false"
                />
              </div>
              <!-- <input v-model="formData.ageRangeLow" type="number" placeholder="请输入年龄范围" @focus="inputActive=true" @blur="inputActive=false"> -->
              ~
              <!-- <input v-model="formData.ageRangeHigh" type="number" placeholder="请输入年龄范围" class="input-div-input" @focus="inputActive=true" @blur="inputActive=false"> -->
              <div class="left-div">
                <el-input
                  v-model="formData.ageRangeHigh"
                  placeholder="请输入年龄"
                  class="input-div-input"
                  controls-position="right"
                  :min="1"
                  :maxlength="10"
                  :step-strictly="true"
                  :controls="false"
                  @focus="inputActive=true"
                  @blur="inputActive=false"
                />
              </div>
            </div>
            <el-tag class="mx-1 tagStyle" size="large" color="#efeef1">
              岁
            </el-tag>
            <!-- <el-select v-model="formData.ageRangeUnit" class="m-2" placeholder="请选择" style="width:20%;">
              <el-option
                v-for="item in ageUnitSelete"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select> -->
          </div>
        </template>
        <template #dangerPositive>
          阴性 <b v-if="inspectResultTypes==='3'">
            (-)
          </b>
          <div v-if="inspectResultTypes!=='3'" style="margin-left: auto; align-items: center;display: flex;">
            危急值: <el-checkbox v-model="formData.dangerPositive" label="阳性" size="large" style="margin-left: 15px;" />
          </div>
        </template>
        <template #viewRange>
          <el-input v-model="formData.viewRange" type="textarea" placeholder="请输入参考区间描述" />
        </template>
      </d-from>
      <div style="height:20px" />
    </div>
  </d-dialog>
</template>
<style>
  .input-div-input{
    border: none;
  }
  .input-div-input .el-input__wrapper{
    padding: 0;
    border: none;
    box-shadow:none;
    /* background: pink; */
  }
  /* .d-dialog__wapper{
    min-width: 920px;
  } */
  .pop-div{
  min-width: 800px;
}
</style>
<style scoped lang="less">
// .topjianyan{
//   width: 49%;
// }
.input-div{
  display: flex;
  align-items: center;
  flex-flow:row wrap;
	justify-content: space-between;
  .left{
    width: 70%;
    // height: 30px;
    border-radius: 3px 3px 3px 3px;
    border: 1px solid #DCDEE2;
    display: flex;
		// flex-flow:row wrap;
		justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    // display: inline-flex;
    flex-grow: 1;
    padding: 0 9px;
    margin-right: 10px;
   .left-div{
     width: 45%;
     height: 100%;
     display: flex;
     align-items: center;
      input{
      width: 100%;
      border: none;
      height: 26px;
      outline: none;
    }
   }
  }
}
.input-divs{
  width: 99%;
  display: flex;
  align-items: center;
  flex-flow:row wrap;
	justify-content: space-between;
  // height: 32px;
  border-radius: 3px 3px 3px 3px;
  border: 1px solid #DCDEE2;
  display: flex;
  // flex-flow:row wrap;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0 9px;
  // .el-input__inner{
  //   width: 40%;
  //     border: none;
  //     height: 26px;
  //     outline: none;
  // }
 .left-div{
     width: 45%;
     height: 100%;
     display: flex;
     align-items: center;
      .input-div-input{
      width: 100%;
      border: none;
      height: 30px;
      outline: none;
    }
   }
}
.input-divs>input:nth-last-child(1) {
  text-align: right;
}
#active{
  //  border: 1px dashed var(--el-border-color);
  box-shadow:0 0 0 1px var(--theme-color);
}
// .input-div-input{
//   width: 45%;
//   border: none;
//   height: 26px;
//   outline: none;
//   .el-input__wrapper{
//     padding: 0;
//   }
// }
.tagStyle{
  color: #000;
  // margin-left: -10px;
  // border-top-left-radius: 0px;
  //    border-bottom-left-radius: 0px;
}
.input-div .input-border-right{
    //  border-right: 0px;
    //  border-top-right-radius: 0px;
    //  border-bottom-right-radius: 0px;
    // width: 80%;
}
</style>